<template>
    <div class="suggest">
         <Scroll :data="result" ref="scroll" style="height:100%;overflow: hidden;width:100%;">
             <div>
        <div class="suggest-list">
            <ul>
            <li class="suggest-item" v-for="item,index in this.result[1]" @click="selectItem(result[1],index)">
              <div class="icon">
               <i class="icon-music"></i>
               </div>
                <div class="name">
                <p class="text">{{item.name}}-{{item.singer}}</p>
                </div>
            </li>
            </ul>
        </div>
        </div>
        </Scroll>
    </div> 
</template>
<script>
import {search} from 'api/search'
import {createSong,getSongVkey} from 'common/js/song'
import Scroll from 'base/scroll/scroll'
import {mapMutations,mapActions} from 'vuex'
const perpage = 20
const TYPE_SINGER='singer'
export default {
    props:{
        query:{
           type:String,
            default:"" 
        },
        showSinger:{
            type:Boolean,
            default:true
        },

    },
    data(){
       return {
          page:1,
          result:[]
       }
    },
    methods:{
       _search(query, page, zhida, perpage){
          search(query, page, zhida, perpage).then(res=>{
            //   console.log(res)
              this.result=this._getres(res.data)
            //   console.log(111,this.result)
          })
       },
       _getres(res){
         let ret=[]
         if(res.zhida){
             ret.push({...res.zhida,...{type:TYPE_SINGER}})
         }
         if(res.song){
            //  console.log(this.__normalizeSongs(res.song.list))
             ret.push(this.__normalizeSongs(res.song.list))
         }
         return ret
       },
       __normalizeSongs(list){
        var ret=[]
        for(let i=0;i<list.length;i++){
             let item=list[i]
            if(item.songid&&item.albummid){
                getSongVkey(item.songmid).then(function(res){
                    const vkey = res.data.items[0].vkey;
                    // console.log(item)
                    ret.push(createSong(item,vkey))
                    // console.log(createSong(item,vkey))
                })
            }
        }
        return ret
       },
       selectItem(list,index){
           console.log(list)
        this.set_fullscreen(true)
        this.set_playlist(list)
        this.selectPlay({list:list,index})
       },
       ...mapMutations({
           set_fullscreen:"SET_FULL_SCREEN",
           set_playlist:"SET_PLAYLIST"
       }),
       ...mapActions([
          "selectPlay"
       ])
    },
    watch:{
        query(){
           this._search(this.query,this.page,this.showSinger,perpage)
        }
    },
    components:{
      Scroll
    },
}
</script>
<style lang="stylus" scoped>
@import '~common/stylus/variable';
@import '~common/stylus/mixin';
.suggest{
    height 100%
    overflow hidden
    position fixed
    .suggest-list{
       height 100%
       overflow hidden
       position relative 
    }
    .suggest-item{
       display:flex 
       height 50px
       line-height 50px
       padding-left 17px
       border-top:1px solid #e5e6e6
       border-bottom 1px solid #ecedee
       font-size 14px
       width 400px
       .icon-music{
           margin-right 6px
       }
    }
}
</style>


